{% extends 'common_project_tpl.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
    <style>
        .row1 {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 10px;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid" style="margin-top: 20px;">
        <div style="margin-bottom: 20px;">
            <div class="input-group" style="width: 300px;">
                <span class="input-group-addon">日期范围</span>
                <input id="rangePicker" type="text" class="form-control">
            </div>
        </div>
        <div class="row1">
            <div class="panel panel-default" style="min-width: 0">
                <div class="panel-heading">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i> 人员工作进度
                </div>
                <div class="panel-body">
                    <div id="column-chart" style="width: 100%">

                    </div>
                </div>
            </div>
            <div class="panel panel-default" style="min-width: 0">
                <div class="panel-heading">
                    <i class="fa fa-pie-chart" aria-hidden="true"></i> 优先级统计
                </div>
                <div class="panel-body">
                    <div id="pie-chart" style="width: 100%">

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/daterangepicker/daterangepicker.js' %}"></script>
    <script src="{% static 'js/highcharts.js' %}"></script>
    <script>
        $(function () {
            initDateRangePicker();
            getChartData();
        });

        function getChartData(start, end) {
            $.ajax({
                url: "{% url 'main:api_statistics_chart' pro_id %}",
                data: {
                    project:{{ pro_id }},
                    start: start,
                    end: end
                },
                dataType: 'json',
                type: 'get',
                success: function (res) {
                    initPiechart(res.data.pie_chart);
                    initColumnchart(res.data.column_chart);
                }
            })
        }

        function initDateRangePicker() {
            var options = {
                maxDate: moment(),
                alwaysShowCalendars: true,
                showWeekNumbers: true,
                "opens": "right",
                "startDate": moment().subtract(6, 'days'),  //默认起始时间7天前
                "endDate": new Date(),                      //现在
                ranges: {
                    '今天': [moment(), moment()],
                    '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '最近7天': [moment().subtract(6, 'days'), moment()],
                    '最近30天': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    '今年': [moment().startOf('year'), moment().endOf('year')],
                },
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' 至 ',
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    resetLabel: "重置",
                    fromLabel: '开始',
                    toLabel: '结束',
                    customRangeLabel: '自定义',
                    weekLabel: 'W',
                    daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    firstDay: 1
                }
            };
            $('#rangePicker').daterangepicker(options, function (start, end, label) {
                // 选择了时间之后，函数自动被触发。
                getChartData(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));

                {#projectUser(start.format('YYYY-MM-DD'), end.add(1, 'days').format('YYYY-MM-DD'));#}
            });
        }

        function initPiechart(data) {
            let option = {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    height: 500,
                },
                title: {
                    text: null
                },
                tooltip: {
                    pointFormat: '{series.name}: {point.percentage:.1f}% value: {point.y}'
                },
                credits: {  // 禁用版权信息
                    enabled: false
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} % \n value: {point.y}',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    name: 'Priority',
                    colorByPoint: true,
                    data: data
                }]
            }
            Highcharts.chart('pie-chart', option);
        }

        function initColumnchart(data) {
            let option = {
                chart: {
                    type: 'column',
                    height: 500
                },
                title: {
                    text: null
                },
                credits: {  // 禁用版权信息
                    enabled: false
                },
                xAxis: {
                    categories: data.categories
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'issues总量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top',
                    shadow: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            '总量: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                    }
                },
                series: data.series
            }
            Highcharts.chart('column-chart', option);
        }
    </script>
{% endblock %}